<template>
  <header
    class="header fixed z-999 top-0 left-0 right-0 h-60px flex items-center justify-between pl-125px box-border"
  >
    <Logo />
    <div class="box-border flex flex-1">
      <el-menu
        mode="horizontal"
        :ellipsis="false"
        text-color="#3d3d3d"
        background-color="transparent"
        active-text-color="#3d3d3d"
        popper-class="nav-menu-popper"
        :default-active="activeMenu"
        router
      >
        <template v-for="item in menuList">
          <el-menu-item
            v-if="!item.children.length"
            :key="item.path"
            :index="item.path"
            >{{ item.label }}</el-menu-item
          >
          <el-sub-menu v-else :index="item.path" :key="`${item.path}/sub`">
            <template #title>{{ item.label }}</template>
            <el-menu-item
              v-for="sub in item.children"
              :key="sub.path"
              :index="`${item.path}${sub.path}`"
              >{{ sub.label }}</el-menu-item
            >
          </el-sub-menu>
        </template>
      </el-menu>
      <user />
    </div>
  </header>
</template>

<script setup>
import { useMenu } from "@/hooks";
import Logo from "./Logo.vue";
import User from "./HeaderUser.vue";

const { menuList, activeMenu } = useMenu();
</script>
